<template>
  <div class="fooer width min-width">
    <div class="fooer-top clear">
      <div class="fooer-left " v-for="(item,index) in links" :key="item.id">
        <div >
          <div class="left-top">{{item.title}}</div>
          <div class="left-bottom">
            <ul class="list fl clear">
              <li v-for="(items,index) in item.children" class="item fl">
                <span class="span" :title="lang =='cn'? '': items.title" v-if="items.type==='link'"@click="goToPage(items.type,items.src)" href="#">{{items.title}}</span>
                <span class="span" :title="lang =='cn'? '': items.title" v-if="items.type==='product'" @click="goToPage(items.type,items.src)" href="#">{{items.title}}</span>
                <div v-if="items.type==='image'" class=" item-ewm">
                  <span :title="lang=='cn'? '':items.title">{{items.title}}</span><img class="item-img fr" :src="items.src">
                </div>
                <div class="item-title" :title="lang=='cn'? '':items.title" v-if="items.type==='text'">{{items.title}}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="fooer-title">
      <p class="data"><a v-if="lang == 'cn'" target="_blank" :href="fooericps.icp_src">{{fooericps.icp_title}}</a>&nbsp;&nbsp;&nbsp;©2018 Purescare. All Rights Reserved</p>
      <p class="title">{{$t('message.technology')}}</p>
    </div>
  </div>
</template>
<script>
  import axios from "axios"

  export default {
    name: 'fooer',
    inject: ['reload'],
    data() {
      return {
        lang:'en',
        links: [],
        fooericps:{}
      }
    },
    created() {
      if (sessionStorage.sitename) {
        this.lang =  sessionStorage.sitename;
      }
      this.fooer()
      this.fooericp()
    },
    methods: {
      goToPage(type,url){
        if(type==='link'){
          sessionStorage.url=JSON.stringify(url);
          this.$router.push(url);

        }else{
          sessionStorage.url=JSON.stringify('/?productid='+url);
          this.$router.push('/?productid='+url);
        }
        this.reload()
      },
      fooer() {
        let _this = this;
        axios.get('system/api/get_link', {
          params: {
            language: _this.lang
          }
        }).then((response) => {
          _this.links = response.data.link;
          sessionStorage.link = JSON.stringify(response.data.link);
          sessionStorage.langen = _this.lang
        })
          .catch(function (error) {
            console.log(error);
          })
      },
      fooericp(){
        let _this = this;
        axios.get('system/api/get_nav_bar', {
          params: {
            language: _this.lang
          }
        }).then((response) => {
          this.fooericps = response.data.config;

        })
          .catch(function (error) {
            console.log(error);
          })
      },
    }
  }
</script>

<style scoped>
  .fooer {
    background: #ffffff;
  }
  .fooer .fooer-top{
    padding-top: 60px;
    min-height: 360px;
    position: relative;
  }
  .fooer .fooer-top .fooer-left {
    width: 280px;
    position: absolute;
    overflow:hidden;
  }
  .fooer .fooer-left:nth-child(1){
    left: 0;
  }
  .fooer .fooer-left:nth-child(2){
    margin: 0;
    left: 50%;
    transform: translate(-50%);
    overflow:hidden;
  }
  .fooer .fooer-left:nth-child(3){
    right: 0;
    padding-left: 60px;
  }
  .fooer .fooer-left .left-top {
    font-size: 20px;
    color: #020202;
  }

  .fooer .fooer-left .left-bottom {
    margin-top: 30px;
  }
  .fooer .fooer-left .left-bottom .list .item {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .fooer .fooer-left .left-bottom .list .item .span {
    color: #999999;
    width: 125px;
    margin-right: 15px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
  .fooer .fooer-left .left-bottom .list .item .item-ewm{
    margin-top: 30px;
  }
  .fooer .fooer-left .left-bottom .list .item .item-ewm .item-img{
    margin-left: 20px;
    width: 100px;
    height: 120px;
  }
  .fooer .fooer-left .left-bottom .list .item .item-title{
    position: absolute;
    top: 45px;
    width: 210px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    left: 60px;
  }
  .fooer .fooer-left:nth-child(3) .left-bottom .list .item:nth-child(2n+1) {
    margin-right: 0;
  }

  .fooer .fooer-left .left-bottom .list .item:nth-child(2n+1) {
    margin-right: 0px;
  }
  .fooer .fooer-title {
    font-size: 14px;
    line-height: 25px;
    color: #999999;
    text-align: center;
    margin-bottom: 30px;
  }
  .fooer .fooer-title .data a{
    color: #999999;
  }
</style>
